<template>
  <el-dialog title="题目预览" :visible.sync="show" width="65%" @close="closeFn">
    <div>
      <span class="span">【题型】：{{ mapFn(questionPreview.questionType)}}</span>
      <span class="span">【编号】：{{questionPreview.number}}</span>
      <span class="span">【难度】：{{difficultymapFn(questionPreview.difficulty)}}</span>
      <span class="span">【标签】：{{questionPreview.tags}}</span>
      <br />
      <span class="span">【学科】：{{questionPreview.subject}}</span>
      <span class="span">【目录】：{{questionPreview.catalogID}}</span>
      <span class="span">【方向】：{{questionPreview.direction}}</span>
    </div>
    <hr />

    【题干】：
    <br />
    <p v-html="questionPreview.question"></p>
    <p>{{mapFn(questionPreview.questionType)}} &nbsp; 选项：（以下选中的选项为正确答案）</p>

    <el-radio-group :value="radio">
      <div >

        <p><el-radio :label="1">A</el-radio></p>
        <p><el-radio :label="2">B</el-radio></p>
        <p><el-radio :label="3">C</el-radio></p>
        <p><el-radio :label="4">D</el-radio></p>
    </div>
    </el-radio-group>
    <hr>
    <p>【参考答案】：<el-button type="danger" @click="videoShow = true">视频答案预览</el-button></p>
    <video v-if="videoShow" controls src="https://vd3.bdstatic.com/mda-ng0cp0kgy5f2zq5d/480p/h264/1656665819861310698/mda-ng0cp0kgy5f2zq5d.mp4?v_from_s=hkapp-haokan-hbe&auth_key=1656824451-0-0-1aa8ea4555cfb5896fd08c6373036092&bcevod_channel=searchbox_feed&pd=1&cd=0&pt=3&logid=1851500356&vid=10472205002162242041&abtest=&klogid=1851500356"></video>
    <hr>
    <p ><span>【答案解析】:</span><span class="analysis" v-html="questionPreview.answer" style="width:30px"></span></p>
    <p>【题目备注】：{{questionPreview.remarks}}</p>
    <span slot="footer" style="padding-left: 80%">
      <el-button type="primary" @click="closeFn">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { questionType as questionTypeMap, difficulty } from '@/api/hmmm/constants'
// import { detail as detailQuestionsAPI } from '@/api/hmmm/questions'
export default {
  props: {
    choiceListAll: {
      type: Object,
      default: () => {
        return {}
      }

    },
    questionTypeMap: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      // 控制视频显隐
      videoShow: false,
      // 储存单选框的值
      radio: 3,
      show: false,
      // 储存当前行对象信息
      questionPreview: {}
    }
  },
  created () {

  },
  methods: {
    // 映射题型
    mapFn (row) {
      // eslint-disable-next-line eqeqeq
      const arry = questionTypeMap.filter((item) => item.value == row)
      // return questionTypeMap.label
      return arry[0]?.label || ''
    },
    difficultymapFn (row) {
      // eslint-disable-next-line eqeqeq
      const arry = difficulty.filter((item) => item.value == row)
      // return questionTypeMap.label
      return arry[0]?.label || ''
    },
    // 弹窗关闭事件
    closeFn () {
      this.show = false
    },
    showDir (row) {
      // this.getQuestionsFn()
      this.questionPreview = row
      this.show = true
      console.log('这里是row', row)
    }
    // 获取题的详情
    // async getQuestionsFn () {
    //   const res = await detailQuestionsAPI({ id: 53 })
    //   console.log('题详情', res)
    // }

  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  .span {
    display: inline-block;
    width: 20%;
    padding: 10px 0;
  }
  .analysis{
    p{
      display: inline;
    }
  }
}
</style>
